<template>
    <el-cascader ref="cascaderRef" popper-class="cascader_tree my_popper" v-model="deviceTypeId" :props="defaultProps"
        :options="treeList.currentTree" :placeholder="placeholder_text" @change="handleChange" clearable/>
</template>
  
<script setup lang="ts">
import { getTreeData, spaceGetTreeData } from "@/http/device";
const props = defineProps({
    needAll: {
        type: Boolean,
        default: true
    },
    selectData: {
        type: Array,
        default: [] as any
    },
    location: { // 设备位置
        type: Boolean,
        default: false
    },
    placeholder_text:{
        type: String,
        default: " "
    }
})


let deviceTypeId: any = ref(['0']);
watch(() => props.selectData, (newValue, oldValue) => {
    console.log(newValue);
    deviceTypeId.value = newValue

});



//指定组件value,label,children对应的属性值 checkStrictly:true父子节点不互相关联,选择任意一级
const defaultProps = {
    checkStrictly: true,
    value: 'id',
    label: 'name',
    children: 'childList',
    expandTrigger:'hover' as const
}


interface Tree {
    code: string;
    codePath: string;
    id: string;
    idPath: string;
    level: number;
    name: string;
    parentId: string;
    childList?: Tree[]
}

const treeList = reactive({
    tree: [] as Array<Tree>,//系统/类别/类型/设备树形结构
    treeAndAll: [] as Array<Tree>,//系统/类别/类型/设备树形结构(加了一个全部选项)
    currentTree: [] as Array<Tree> //当前所需要的格式(有的需要全部,有的不需要)
})

const emit = defineEmits(['getDeviceTypeId', 'getTreeList']);

const cascaderRef = ref<any>("");

//所属系统/类别/类型/设备改变时
const handleChange = (val: any) => {
    // console.log('48', val);

    // deviceTypeId.value = val[val.length - 1];
    emit('getDeviceTypeId', val);
    //选择后关闭面板(需要有值才调用此方法,否则清空时会打开面板)
    if(val){
        cascaderRef.value.togglePopperVisible();
    }
    
   
    // //如果选择到最后一级时,关闭面板
    // let nodeChildren = cascaderRef.value.getCheckedNodes();
    // // console.log('nodeChildren', nodeChildren[0].children);
    // if (nodeChildren[0] && nodeChildren[0].children && nodeChildren[0].children.length == 0) {
    //     cascaderRef.value.togglePopperVisible();
    // }
}

const getTreeList = () => {
  if(props.location) {
    spaceGetTreeData().then((res: any) => {
        console.log(res);
        
        if (res && res.result && res.result) {
            treeList.tree = res.result;
            treeList.treeAndAll = JSON.parse(JSON.stringify(treeList.tree));
            //筛选条件加上全部,弹窗新增和编辑不需要全部选项
            treeList.treeAndAll.unshift({
                code: '',
                codePath: '',
                id: '0',
                idPath: '',
                level: 0,
                name: '全部',
                parentId: '',
                childList: []
            })
            emit('getTreeList', treeList);
            if (props.needAll) {
                treeList.currentTree = treeList.treeAndAll;
            } else {
                treeList.currentTree = treeList.tree;
            }
        }
    })
  } else {
    getTreeData().then((res: any) => {
        if (res && res.result && res.result) {
            treeList.tree = res.result;
            treeList.treeAndAll = JSON.parse(JSON.stringify(treeList.tree));
            //筛选条件加上全部,弹窗新增和编辑不需要全部选项
            treeList.treeAndAll.unshift({
                code: '',
                codePath: '',
                id: '0',
                idPath: '',
                level: 0,
                name: '全部',
                parentId: '',
                childList: []
            })
            emit('getTreeList', treeList);
            if (props.needAll) {
                treeList.currentTree = treeList.treeAndAll;
            } else {
                treeList.currentTree = treeList.tree;
            }
        }
    })
  }
}

getTreeList();

//清空
const empty = () => {
    cascaderRef.value.cascaderPanelRef.clearCheckedNodes();
    nextTick(() => {
        deviceTypeId.value = ['0'];
    })

}

//暴露方法,父组件才能调用
defineExpose({ empty });
</script>
  
<style lang="scss">
.cascader_tree {

    // :deep(.el-radio__inner) {
    .el-radio__inner {
        top: -18px;
        left: -19px;
        border-radius: 0;
        border: 0;
        width: 350px;
        height: 34px;
        background-color: transparent !important;
        cursor: pointer;
        box-sizing: border-box;
        position: absolute;
    }

    .el-radio__input {
        &.is-checked {
            .el-radio__inner {
                background: transparent;
            }
        }
    }

}
.my_popper {
    .el-cascader-node {
        &.in-active-path {
            color: #606266 !important;
            font-weight: 400;
        }

        &.in-checked-path {
            color: #C0A45B !important;
            font-weight: 700;
        }
    }
}
</style>
  